<script setup lang="ts">
defineOptions({
  name: "Analysis"
});

import { ref } from "vue";
import { useColumns } from "./columns";
import { PureTableBar } from "@/components/RePureTableBar";
import View from "@iconify-icons/ep/view";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

const tableRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onDetail,
  onSizeChange,
  onCurrentChange
} = useColumns();
</script>

<template>
  <div class="main">
    <PureTableBar title="知识库统计导出">
      <template #buttons>
        <el-button type="primary"> 导出 </el-button>
      </template>
      <template v-slot="{ size }">
        <pure-table
          ref="tableRef"
          border
          adaptive
          :adaptiveConfig="adaptiveConfig"
          row-key="id"
          alignWhole="center"
          showOverflowTooltip
          :loading="loading"
          :loading-config="loadingConfig"
          :data="
            dataList.slice(
              (pagination.currentPage - 1) * pagination.pageSize,
              pagination.currentPage * pagination.pageSize
            )
          "
          :columns="columns"
          :pagination="pagination"
          @page-size-change="onSizeChange"
          @page-current-change="onCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin !outline-none"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(View)"
              @click="onDetail(row)"
            >
              详情
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>
